<template>
    <div class="votePage">
        <div class="voteTop">
            <div class="voteTitle">
                投票选举
            </div>
            <div class="learnIndex">
                <ly-tab class="ly-tab" v-model="selectedId" :items="items" :selectedId="selectedId" :options="options" @change="tabChange"></ly-tab>
            </div>
        </div>

        <mu-paper :z-depth="1" class="demo-loadmore-wrap" >
            <mu-container ref="container" class="demo-loadmore-content">
                <Loading v-if="notMore" class="empty-text-wrap"/>
                <mu-load-more  :loading="loading" @load="load">
                    <div class="voteWrap">
                        <div class="voteList" :class="{'show':selectedId==0}">
                            <div class="voteListItem" v-for="(item,index) in voteList" :key="index" @click.stop="navToDetail(item)">
                                <p class="voteHeadLine" :class="{'unBegin':item.status==0,'ing':item.status==1,'over':item.status==2}">{{item.theme}}</p>
                                <p class="flex">
                                    <span class="voteTime flex-1">{{item.start_time |YbTime3}}-{{item.end_time |YbTime3}}</span>
                                    <!--:class="{'active':index==`${selectedId}`}"-->
                                    <span class="voteStatus" v-if="item.status==0" :class="{'unBegin':item.status==0,'ing':item.status==1,'over':item.status==2}">未开始</span>
                                    <span class="voteStatus" v-if="item.status==1" :class="{'unBegin':item.status==0,'ing':item.status==1,'over':item.status==2}">进行中</span>
                                    <span class="voteStatus" v-if="item.status==2" :class="{'unBegin':item.status==0,'ing':item.status==1,'over':item.status==2}">已结束</span>
                                </p>
                            </div>
                        </div>
                        <div class="voteList" :class="{'show':selectedId==1}">
                            <div class="voteListItem" v-for="(item,index) in voteList" :key="index" @click.stop="navToDetail(item)">
                                <p class="voteHeadLine" :class="{'unBegin':item.status==0,'ing':item.status==1,'over':item.status==2}">{{item.theme}}</p>
                                <p class="flex">
                                    <span class="voteTime flex-1">{{item.start_time |YbTime3}}-{{item.end_time |YbTime3}}</span>
                                    <span class="voteStatus" v-if="item.status==0" :class="{'unBegin':item.status==0,'ing':item.status==1,'over':item.status==2}">未开始</span>
                                </p>
                            </div>
                        </div>
                        <div class="voteList" :class="{'show':selectedId==2}" >
                            <div class="voteListItem" v-for="(item,index) in voteList" :key="index" @click.stop="navToDetail(item)">
                                <p class="voteHeadLine" :class="{'unBegin':item.status==0,'ing':item.status==1,'over':item.status==2}">{{item.theme}}</p>
                                <p class="flex">
                                    <span class="voteTime flex-1">{{item.start_time |YbTime3}}-{{item.end_time |YbTime3}}</span>
                                    <span class="voteStatus" v-if="item.status==1" :class="{'unBegin':item.status==0,'ing':item.status==1,'over':item.status==2}">进行中</span>
                                </p>
                            </div>
                        </div>
                        <div class="voteList" :class="{'show':selectedId==3}" >
                            <div class="voteListItem" v-for="(item,index) in voteList" :key="index" @click.stop="navToDetail(item)">
                                <p class="voteHeadLine" :class="{'unBegin':item.status==0,'ing':item.status==1,'over':item.status==2}">{{item.theme}}</p>
                                <p class="flex">
                                    <span class="voteTime flex-1">{{item.start_time |YbTime3}}-{{item.end_time |YbTime3}}</span>
                                    <span class="voteStatus" v-if="item.status==2" :class="{'unBegin':item.status==0,'ing':item.status==1,'over':item.status==2}">已结束</span>
                                </p>
                            </div>
                        </div>
                    </div>
                </mu-load-more>
                <div class="loading" v-if="loadOver" :class="{'notPageOne':p>1||voteList.length<6}">{{loaded}}</div>
                <!--<div class="loading" v-if="loadOver">{{loaded}}</div>-->
            </mu-container>
        </mu-paper>

    </div>
</template>
<script>
    import LyTab from "@cp/index";
    import Toast from 'muse-ui-toast';
    import Loading from '@/components/emptyText.vue';
    export  default ({
        data(){
            return {
                selectedId: 0,
                status:"",
                p:1,
                items: [
                    { label: "全部", org_type: 0 },
                    { label: "未开始", org_type: 1 },
                    { label: "进行中", org_type:2 },
                    { label: "已结束", org_type: 3 }
                ],
                voteList:[],
                options: {
                    activeColor: "#fff",
                    color: "#fff"
                },
                loading: false,
                loadOver:false,
                loaded: "加载更多...",
                notMore: false,//没有更多数据
                // defaultIndex:0
            }
        },
        components:{
            LyTab,
            Loading
        },
        methods:{
            tabChange(e) {
                console.log(e)
                this.selectedId=e.org_type;
                if(e.org_type==0){
                    //全部
                    this.status ='';
                }else if(e.org_type==1){
                    this.status =0;
                }else if(e.org_type==2){
                    this.status =1;
                }else if(e.org_type==3){
                    this.status =2;
                }
                this.p=1;
                this.notMore =false;
                this.voteList =[];
                this.getData(this.p,this.status)
            },
            getData(p,status){
                this.$http.get('/app/Vote/index',{
                    p,
                    status,
                    page:6,
                    member_id:JSON.parse(Cookies.get('user_71ydj')).id
                }).then((res)=>{
                    console.log(res.data.length)
                    if(res.code==200){
                        if (res.data.length) {
                            this.voteList.push(...res.data);
                        }
                        this.loadOver = false;
                        if (this.p != 1) {
                            if (res.data.length) {
                            } else {
                                this.loadOver = true;
                                this.loading = false;
                                this.loaded = '没有更多数据了'
                                return false
                            }
                        } else {
                            if (!res.data.length) {
                                this.notMore = true;
                                this.loadOver = false;
                            } else {
                                if (res.data.length < 6 && res.data.length != 0) {
                                    this.loadOver = true;
                                    this.loaded = '没有更多数据了';
                                    this.notMore =false;
                                }
                            }
                        }
                        // if (res.data.length < 10&&this.p==1) {
                        //     this.loaded = "没有更多";
                        //     this.loading = false;
                        //     this.notMore = false;
                        //     this.voteList = res.data;
                        //     this.loadOver =false;
                        //     return;
                        // }
                        // if(p==1){
                        //     this.voteList = res.data;
                        //     console.log(this.voteList)
                        // }else{
                        //     console.log(res.data);
                        //     console.log(res.data.length);
                        //     if(res.data.length){
                        //         console.log('nomoreData')
                        //         this.voteList.push(...res.data);
                        //     }else{
                        //         this.loadOver =true;
                        //         this.loading =false;
                        //         this.loaded='没有更多数据了'
                        //         return false
                        //     }
                        // }
                        // this.loading = false;
                    }
                })
            },
            load(){
                console.log(this.loadOver)
                if (!this.loadOver) {
                    this.loading = true;
                    clearTimeout(this.method);
                    this.method = setTimeout(() => {
                        this.p = this.p + 1;
                        console.log('loading')
                        this.getData(this.p,this.status);
                        this.loading = false;
                    }, 1000);
                }
            },
            navToDetail(item){
                if(item.status==0){
                    Toast.error('该投票还未开始')
                    return
                }else{
                    if(item.status==2){
                        //投票已结束
                        this.$router.push({
                            path:'/home/voteResult?id='+item.id+'&mode='+item.mode
                        })
                    }else{
                        //你已经投过票了
                        if(item.voted_status==1){
                            Toast.error('你已经投过票了')
                        }else{
                            this.$router.push({
                                path:'/home/votePage?id='+item.id
                            })
                        }

                    }

                }
            }
        },
        mounted(){
            this.$progress.done();
            this.getData(this.p,this.status);
        }
    })
</script>



<style scoped lang="scss">

    .votePage{
        height: 100vh;
        background: #f7f7f7;
        .empty-text-wrap {
            width: 100%;
            height: 40vh;
            margin-top: 10vh;
        }
        /*padding-bottom: 16px;*/
        .voteTop{
            width:100%;
            height:248px;
            background-image: url("../../../assets/img/voteBg.png");
            background-position: center;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            padding: 0 16px;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;;
            .voteTitle{
                font-size:28px;
                font-family:PingFang SC;
                font-weight:bold;
                color:rgba(255,255,255,1);
                padding-top: 50px;
            }
            .learnIndex{
                display: flex;
                justify-content: flex-start;
                width:auto;
                margin-left: -15px;
                margin-top: 30px;
                element.style{
                    background-color:red !important;
                }
               /deep/ .ly-tab-item .ly-tabbar{
                    .active{
                        span{
                            font-weight: bold;
                        }
                    }
                }
                .ly-tab .ly-tab-active-bar{
                    background:-webkit-linear-gradient(left,#eb4e44,#f47447);
                    background:-o-linear-gradient(right,#eb4e44,#f47447);
                    background:-moz-linear-gradient(right,#eb4e44,#f47447);
                    background:linear-gradient(to right,#eb4e44,#f47447);
                    border-radius: 10px;
                }
            }

        }
        /deep/ .mu-paper{
            background-color: transparent;
            position: relative;
            top: -60px;
            bottom: 0;
            height: calc( 100vh - 200px );
            overflow-y: scroll;
            &.mu-elevation-1{
                box-shadow: 0 0 0 #fff;
            }
        }
        .voteWrap{
            width: 100%;
            padding: 0 16px;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            .voteList{
                width: 100%;
                /*position: absolute;*/
                display: none;
                .voteListItem{
                    /*width: 100%;*/
                    height:110px;
                    background:rgba(255,255,255,1);
                    border-radius:4px;
                    margin-bottom: 16px;
                    overflow: hidden;
                    .voteHeadLine{
                        font-size:15px;
                        font-family:PingFang SC;
                        font-weight:bold;
                        color:rgba(51,51,51,1);
                        text-overflow: -o-ellipsis-lastline;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        line-clamp: 2;
                        -webkit-box-orient: vertical;
                        margin-top: 28px;
                        padding-left: 28px;
                        padding-right: 34px;
                        position: relative;
                        height: 46px;
                        &:after{
                            position: absolute;
                            content: '';
                            width: 8px;
                            height: 8px;
                            background-image: url("../../../assets/img/over.png");
                            background-repeat: no-repeat;
                            background-position: center;
                            left: 12px;
                            top: 5px;
                            background-size: 8px 8px;
                        }

                        &.over{
                            &:after{
                                background-image: url("../../../assets/img/over.png");
                            }
                        }
                        &.unBegin{
                            &:after{
                                background-image: url("../../../assets/img/notBegin.png");
                            }
                        }
                        &.ing{
                            &:after{
                                background-image: url("../../../assets/img/ing.png");
                            }
                         }

                    }
                    .voteTime{
                        display: inline-block;
                        font-size:12px;
                        font-family:PingFang SC;
                        color:rgba(194,194,194,1);
                        margin-left: 28px;
                    }
                    .voteStatus{
                        display: inline-block;
                        border-radius:4px;
                        width:69px;
                        /*height:26px;*/
                        /*line-height: 26px;*/
                        font-size: 12px;
                        margin-right: 32px;
                        text-align: center;
                        background:rgba(253,247,233,1);
                        padding: 4px 0;
                        &.over{
                            background:rgba(249,249,249,1);
                            color:rgba(151,151,151,1);
                        }
                        &.unBegin{
                            background:rgba(249,249,249,1);
                            color:rgba(222,166,69,1);
                        }
                        &.ing{
                            background:rgba(255,236,231,1);
                            color:rgba(236,83,69,1);
                        }
                    }
                }
                &.show{
                    display: block;
                }
            }
        }


    }
    .flex{
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
    }
    .align-center{
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
    .loading {
        width: 100%;
        font-size: 14px;
        color: #dddddd;
        display: flex;
        align-items: center;
        justify-content: center;
        &.notPageOne {
            margin-top: -40px;
        }
    }
    .flex-1{
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        flex: 1;
        min-width: 0;
        height: 100%;
    }
    .mu-load-more /deep/ .mu-circle-spinner{
        border-color: #e5e5e5;
    }
    .votePage /deep/.mu-elevation-1{
        box-shadow: 0 0.05333rem 0.02667rem -0.02667rem rgba(0,0,0,0), 0 0.02667rem 0.02667rem 0 rgba(0,0,0,0), 0 0.02667rem 0.08rem 0 rgba(0,0,0,0); ;
        -webkit-box-shadow:0 0.05333rem 0.02667rem -0.02667rem rgba(0,0,0,0), 0 0.02667rem 0.02667rem 0 rgba(0,0,0,0), 0 0.02667rem 0.08rem 0 rgba(0,0,0,0); ;
    }
</style>